<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in car">
                {{item.pname}} --- 商品价格：{{item.price}} --- 库存: {{item.stock}}
                数量：<input type="number" v-model="item.num" style="width: 30px;"/>
            </li>
            <li><strong>总价：{{calcSum}}</strong></li>
            <li v-html="warn()"></li>
            
        </ul>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            car:[
                {pname:'Iphone 12', price:7999, stock:10,num:3},
                {pname:'小米11',price:3599,stock:3,num:1},
            ],
            message:""
        },
        // methods ： 当方法中的数据发生改变，方法会自动调用
        methods:{
            // calcSum(){
            //     let sum = 0;
            //     this.car.forEach(item => {
            //         sum += item.price * item.num;
            //     });
            //     return sum;
            // }
            warn(){
                let message = "";
                this.car.forEach(item => {
                    if(item.num > item.stock){
                        message += `${item.pname}的库存超出限制<br/>`
                    }
                });
                return message;
            }
        },
        // 计算属性 : 当方法中的数据发生改变，方法会自动调用
        computed:{
            calcSum(){
                // alert(test);
                let sum = 0;
                this.car.forEach(item => {
                    sum += item.price * item.num;
                });
                return sum;
            }
        },

        // 侦听器 专门用于侦听数据的变化，当数据发生变化会自动调用方法
        watch:{
            // 要侦听的数据 ： 数据
            car:{
                handler(newvalue, oldvalue){
                    this.message ="";
                    this.car.forEach(item => {
                        if(item.num > item.stock){
                            this.message += `${item.pname}的库存超出限制<br/>`
                        }
                    });
                },
                // 基本类型的侦听，将侦听的数据作为函数
                deep:true // 深度侦听 深度侦听

            },
            message(newvalue, oldvalue){
                console.info(newvalue,oldvalue);
            }
        }
    });

    /*
    方法和计算属性的区别：
    声明发生不一样，调用不一样方法要用(), 计算数学调用不加()
    */

   /*
   方法和侦听器的区别：
    方法中所有的数据任意数据发生了改变就会自动调用方法
    侦听器，需要指定具体的侦听数据，只有被具体指定的侦听器发生了改变才会触发
    不能像方法那样调用，而是靠 vue 自动触发
    */
</script>
</html>